<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站右侧功能栏</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #4F46E5;
            --primary-light: #818CF8;
            --primary-dark: #4338CA;
            --secondary: #6366F1;
            --success: #10B981;
            --warning: #F59E0B;
            --danger: #EF4444;
            --gray: #6B7280;
            --light-gray: #F3F4F6;
            --dark-gray: #374151;
            --text-dark: #1F2937;
            --text-light: #F9FAFB;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --radius: 12px;
            --transition: all 0.25s ease;
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #F9FAFB;
            color: var(--text-dark);
            line-height: 1.5;
        }
        
        .sidebar-container {
            max-width: 360px;
            padding: 1.5rem 0.75rem;
        }
        
        .sidebar-card {
            background-color: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 1.25rem;
            margin-bottom: 1.5rem;
            transition: var(--transition);
            overflow: hidden;
        }
        
        .sidebar-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .card-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin: 0;
            color: var(--dark-gray);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .card-title i {
            color: var(--primary);
        }
        
        .see-all {
            font-size: 0.85rem;
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .see-all:hover {
            color: var(--primary-dark);
            text-decoration: underline;
        }
        
        /* 用户信息样式 */
        .user-profile-card {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
        }
        
        .user-profile-card .card-header {
            border-bottom-color: rgba(255, 255, 255, 0.2);
        }
        
        .user-profile-card .card-title {
            color: white;
        }
        
        .user-profile-card .card-title i {
            color: white;
        }
        
        .profile-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 1rem 0;
        }
        
        .profile-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid white;
            margin-bottom: 1rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        }
        
        .profile-name {
            font-size: 1.25rem;
            font-weight: 600;
            margin: 0 0 0.25rem 0;
        }
        
        .profile-bio {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.9);
            margin: 0 0 1rem 0;
            text-align: center;
            max-width: 90%;
        }
        
        .profile-stats {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            width: 100%;
            margin-bottom: 1rem;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-value {
            font-weight: 600;
            font-size: 1.1rem;
            margin: 0;
        }
        
        .stat-label {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.8);
            margin: 0;
        }
        
        .edit-profile-btn {
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            border-radius: 20px;
            padding: 0.4rem 1.25rem;
            font-size: 0.9rem;
            font-weight: 500;
            transition: var(--transition);
            width: 100%;
        }
        
        .edit-profile-btn:hover {
            background-color: rgba(255, 255, 255, 0.3);
        }
        
        /* 推荐文章样式 */
        .article-item {
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--light-gray);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .article-item:last-child {
            border-bottom: none;
        }
        
        .article-item:hover {
            padding-left: 0.5rem;
        }
        
        .article-title {
            font-weight: 600;
            margin: 0 0 0.35rem 0;
            transition: var(--transition);
        }
        
        .article-item:hover .article-title {
            color: var(--primary);
        }
        
        .article-meta {
            font-size: 0.8rem;
            color: var(--gray);
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .article-meta i {
            font-size: 0.9rem;
        }
        
        /* 图文内容样式 */
        .image-content-item {
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--light-gray);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .image-content-item:last-child {
            border-bottom: none;
        }
        
        .image-content-item:hover {
            transform: translateX(3px);
        }
        
        .content-image {
            width: 100%;
            height: 160px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 0.75rem;
            transition: var(--transition);
        }
        
        .image-content-item:hover .content-image {
            filter: brightness(1.05);
        }
        
        .content-caption {
            font-weight: 500;
            margin: 0 0 0.25rem 0;
        }
        
        /* 论坛帖子样式 */
        .forum-post {
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--light-gray);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .forum-post:last-child {
            border-bottom: none;
        }
        
        .forum-post:hover {
            background-color: rgba(79, 70, 229, 0.02);
        }
        
        .post-title {
            font-weight: 600;
            margin: 0 0 0.35rem 0;
            transition: var(--transition);
        }
        
        .forum-post:hover .post-title {
            color: var(--primary);
        }
        
        .post-meta {
            font-size: 0.8rem;
            color: var(--gray);
            margin: 0;
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .post-meta .comments {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .post-meta .views {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        /* 话题和标签样式 */
        .topics-container, .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            padding: 0.5rem 0;
        }
        
        .topic-item {
            background-color: var(--light-gray);
            border-radius: 20px;
            padding: 0.4rem 0.9rem;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 0.4rem;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .topic-item:hover {
            background-color: var(--primary-light);
            color: white;
        }
        
        .topic-item i {
            font-size: 0.75rem;
            color: var(--gray);
            transition: var(--transition);
        }
        
        .topic-item:hover i {
            color: white;
        }
        
        .tag-item {
            background-color: rgba(79, 70, 229, 0.1);
            color: var(--primary);
            border-radius: 20px;
            padding: 0.35rem 0.85rem;
            font-size: 0.85rem;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .tag-item:hover {
            background-color: var(--primary);
            color: white;
        }
        
        /* 推荐用户样式 */
        .suggested-user {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .suggested-user:last-child {
            border-bottom: none;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .user-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid transparent;
            transition: var(--transition);
        }
        
        .suggested-user:hover .user-avatar {
            border-color: var(--primary-light);
        }
        
        .user-details {
            min-width: 0;
        }
        
        .user-name {
            font-weight: 600;
            margin: 0 0 0.15rem 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .user-meta {
            font-size: 0.8rem;
            color: var(--gray);
            margin: 0;
        }
        
        .follow-btn {
            background-color: white;
            color: var(--primary);
            border: 1px solid var(--primary);
            border-radius: 20px;
            padding: 0.25rem 1rem;
            font-size: 0.85rem;
            font-weight: 500;
            transition: var(--transition);
        }
        
        .follow-btn:hover {
            background-color: var(--primary);
            color: white;
        }
        
        .follow-btn.following {
            background-color: var(--light-gray);
            color: var(--dark-gray);
            border-color: var(--light-gray);
        }
        
        .follow-btn.following:hover {
            background-color: var(--light-gray);
            color: var(--danger);
            border-color: var(--danger);
        }
        
        /* 活动样式 */
        .event-item {
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .event-item:last-child {
            border-bottom: none;
        }
        
        .event-date {
            display: inline-block;
            background-color: var(--primary-light);
            color: white;
            font-weight: 600;
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            font-size: 0.8rem;
            margin-bottom: 0.5rem;
        }
        
        .event-title {
            font-weight: 600;
            margin: 0 0 0.25rem 0;
            color: var(--dark-gray);
            transition: var(--transition);
            cursor: pointer;
        }
        
        .event-title:hover {
            color: var(--primary);
        }
        
        .event-details {
            font-size: 0.85rem;
            color: var(--gray);
            margin: 0 0 0.5rem 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .event-details i {
            font-size: 0.9rem;
        }
        
        .join-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 4px;
            padding: 0.25rem 0.75rem;
            font-size: 0.85rem;
            font-weight: 500;
            transition: var(--transition);
        }
        
        .join-btn:hover {
            background-color: var(--primary-dark);
        }
        
        /* 通知样式 */
        .notification-item {
            display: flex;
            gap: 0.75rem;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--light-gray);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .notification-item:last-child {
            border-bottom: none;
        }
        
        .notification-item:hover {
            background-color: rgba(79, 70, 229, 0.02);
        }
        
        .notification-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: rgba(79, 70, 229, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            flex-shrink: 0;
        }
        
        .notification-icon.unread {
            position: relative;
        }
        
        .notification-icon.unread::after {
            content: '';
            position: absolute;
            top: 2px;
            right: 2px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--danger);
        }
        
        .notification-content {
            flex: 1;
            font-size: 0.9rem;
        }
        
        .notification-text {
            margin: 0 0 0.25rem 0;
        }
        
        .notification-text a {
            color: var(--primary);
            font-weight: 500;
            text-decoration: none;
        }
        
        .notification-text a:hover {
            text-decoration: underline;
        }
        
        .notification-time {
            font-size: 0.8rem;
            color: var(--gray);
            margin: 0;
        }
        
        /* 群组样式 */
        .group-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--light-gray);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .group-item:last-child {
            border-bottom: none;
        }
        
        .group-item:hover {
            transform: translateX(3px);
        }
        
        .group-icon {
            width: 48px;
            height: 48px;
            border-radius: 8px;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .group-details {
            flex: 1;
            min-width: 0;
        }
        
        .group-name {
            font-weight: 600;
            margin: 0 0 0.15rem 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .group-meta {
            font-size: 0.8rem;
            color: var(--gray);
            margin: 0;
        }
        
        /* 赞助商样式 */
        .sponsor-card {
            background: linear-gradient(135deg, #6366F1, #8B5CF6);
            color: white;
            position: relative;
            overflow: hidden;
        }
        
        .sponsor-badge {
            position: absolute;
            top: 0.75rem;
            right: 0.75rem;
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
            font-size: 0.7rem;
            font-weight: 500;
            padding: 0.15rem 0.5rem;
            border-radius: 4px;
        }
        
        .sponsor-content {
            padding: 1rem 0;
        }
        
        .sponsor-logo {
            width: 60px;
            height: 60px;
            background-color: white;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
        }
        
        .sponsor-logo img {
            max-width: 80%;
            max-height: 80%;
        }
        
        .sponsor-title {
            font-weight: 600;
            text-align: center;
            margin: 0 0 0.5rem 0;
        }
        
        .sponsor-desc {
            font-size: 0.85rem;
            text-align: center;
            margin: 0 0 1rem 0;
            opacity: 0.9;
        }
        
        .sponsor-cta {
            display: block;
            width: 100%;
            background-color: white;
            color: var(--primary);
            text-align: center;
            padding: 0.5rem;
            border-radius: 6px;
            font-weight: 500;
            text-decoration: none;
            font-size: 0.9rem;
            transition: var(--transition);
        }
        
        .sponsor-cta:hover {
            background-color: var(--light-gray);
            color: var(--primary-dark);
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .sidebar-container {
                max-width: 100%;
                padding: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="sidebar-container ms-auto">
        <!-- 当前用户信息 -->
        <div class="sidebar-card user-profile-card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-user-circle"></i> 个人资料</h3>
                <a href="#" class="see-all">编辑</a>
            </div>
            
            <div class="profile-info">
                <img src="https://picsum.photos/id/64/80/80" alt="当前用户的头像" class="profile-avatar">
                <h4 class="profile-name">张明辉</h4>
                <p class="profile-bio">前端开发工程师 | 热爱设计与技术</p>
                
                <div class="profile-stats">
                    <div class="stat-item">
                        <p class="stat-value">248</p>
                        <p class="stat-label">关注</p>
                    </div>
                    <div class="stat-item">
                        <p class="stat-value">1.2k</p>
                        <p class="stat-label">粉丝</p>
                    </div>
                    <div class="stat-item">
                        <p class="stat-value">356</p>
                        <p class="stat-label">动态</p>
                    </div>
                </div>
                
                <button class="edit-profile-btn">
                    <i class="fas fa-edit"></i> 完善资料
                </button>
            </div>
        </div>
        
        <!-- 通知 -->
        <div class="sidebar-card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-bell"></i> 通知</h3>
                <a href="#" class="see-all">全部</a>
            </div>
            
            <div class="notifications">
                <div class="notification-item">
                    <div class="notification-icon unread">
                        <i class="fas fa-heart"></i>
                    </div>
                    <div class="notification-content">
                        <p class="notification-text"><a href="#">李婷婷</a> 点赞了你的文章</p>
                        <p class="notification-time">10分钟前</p>
                    </div>
                </div>
                
                <div class="notification-item">
                    <div class="notification-icon unread">
                        <i class="fas fa-comment"></i>
                    </div>
                    <div class="notification-content">
                        <p class="notification-text"><a href="#">王建国</a> 评论了你的帖子</p>
                        <p class="notification-time">35分钟前</p>
                    </div>
                </div>
                
                <div class="notification-item">
                    <div class="notification-icon">
                        <i class="fas fa-user-plus"></i>
                    </div>
                    <div class="notification-content">
                        <p class="notification-text"><a href="#">陈思思</a> 关注了你</p>
                        <p class="notification-time">2小时前</p>
                    </div>
                </div>
                
                <div class="notification-item">
                    <div class="notification-icon">
                        <i class="fas fa-calendar-alt"></i>
                    </div>
                    <div class="notification-content">
                        <p class="notification-text">前端开发者线上交流会将在30分钟后开始</p>
                        <p class="notification-time">今天 19:00</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 推荐文章 -->
        <div class="sidebar-card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-newspaper"></i> 推荐文章</h3>
                <a href="#" class="see-all">更多</a>
            </div>
            
            <div class="articles">
                <div class="article-item">
                    <h4 class="article-title">2023年前端开发必备的10个新工具</h4>
                    <p class="article-meta">
                        <i class="far fa-user"></i> 技术前线
                        <i class="far fa-clock"></i> 3天前
                    </p>
                </div>
                
                <div class="article-item">
                    <h4 class="article-title">如何构建高性能的React应用</h4>
                    <p class="article-meta">
                        <i class="far fa-user"></i> 前端开发博客
                        <i class="far fa-clock"></i> 1周前
                    </p>
                </div>
                
                <div class="article-item">
                    <h4 class="article-title">CSS Grid布局完全指南</h4>
                    <p class="article-meta">
                        <i class="far fa-user"></i> 设计与代码
                        <i class="far fa-clock"></i> 2周前
                    </p>
                </div>
            </div>
        </div>
        
        <!-- 推荐图文内容 -->
        <div class="sidebar-card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-image"></i> 热门图文</h3>
                <a href="#" class="see-all">更多</a>
            </div>
            
            <div class="image-contents">
                <div class="image-content-item">
                    <img src="https://picsum.photos/id/26/400/200" alt="前端开发工具展示" class="content-image">
                    <p class="content-caption">前端开发必备的5个生产力工具推荐</p>
                    <p class="article-meta">
                        <i class="far fa-heart"></i> 342
                        <i class="far fa-comment"></i> 48
                    </p>
                </div>
                
                <div class="image-content-item">
                    <img src="https://picsum.photos/id/42/400/200" alt="UI设计作品展示" class="content-image">
                    <p class="content-caption">2023年UI设计趋势预测与案例分析</p>
                    <p class="article-meta">
                        <i class="far fa-heart"></i> 567
                        <i class="far fa-comment"></i> 89
                    </p>
                </div>
            </div>
        </div>
        
        <!-- 推荐论坛帖子 -->
        <div class="sidebar-card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-comments"></i> 论坛热帖</h3>
                <a href="#" class="see-all">更多</a>
            </div>
            
            <div class="forum-posts">
                <div class="forum-post">
                    <h4 class="post-title">大家是如何解决React状态管理复杂性的？</h4>
                    <p class="post-meta">
                        <span class="comments"><i class="far fa-comment"></i> 128</span>
                        <span class="views"><i class="far fa-eye"></i> 3.2k</span>
                    </p>
                </div>
                
                <div class="forum-post">
                    <h4 class="post-title">TypeScript是否值得在小型项目中使用？</h4>
                    <p class="post-meta">
                        <span class="comments"><i class="far fa-comment"></i> 95</span>
                        <span class="views"><i class="far fa-eye"></i> 2.7k</span>
                    </p>
                </div>
                
                <div class="forum-post">
                    <h4 class="post-title">分享一下你的前端面试经验</h4>
                    <p class="post-meta">
                        <span class="comments"><i class="far fa-comment"></i> 217</span>
                        <span class="views"><i class="far fa-eye"></i> 5.8k</span>
                    </p>
                </div>
            </div>
        </div>
        
        <!-- 热门话题 -->
        <div class="sidebar-card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-fire"></i> 热门话题</h3>
                <a href="#" class="see-all">更多</a>
            </div>
            
            <div class="topics-container">
                <div class="topic-item">
                    <i class="fas fa-fire"></i>
                    <span>前端开发新趋势</span>
                </div>
                <div class="topic-item">
                    <i class="fas fa-fire"></i>
                    <span>UI设计中的微交互</span>
                </div>
                <div class="topic-item">
                    <i class="fas fa-fire"></i>
                    <span>远程工作效率提升</span>
                </div>
                <div class="topic-item">
                    <i class="fas fa-fire"></i>
                    <span>程序员健康管理</span>
                </div>
                <div class="topic-item">
                    <i class="fas fa-fire"></i>
                    <span>AI在开发中的应用</span>
                </div>
                <div class="topic-item">
                    <i class="fas fa-fire"></i>
                    <span>响应式设计最佳实践</span>
                </div>
            </div>
        </div>
        
        <!-- 热门标签 -->
        <div class="sidebar-card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-tags"></i> 热门标签</h3>
                <a href="#" class="see-all">全部</a>
            </div>
            
            <div class="tags-container">
                <div class="tag-item">JavaScript</div>
                <div class="tag-item">React</div>
                <div class="tag-item">Vue</div>
                <div class="tag-item">CSS</div>
                <div class="tag-item">HTML5</div>
                <div class="tag-item">TypeScript</div>
                <div class="tag-item">UI设计</div>
                <div class="tag-item">性能优化</div>
                <div class="tag-item">前端框架</div>
                <div class="tag-item">Webpack</div>
            </div>
        </div>
        
        <!-- 推荐用户 -->
        <div class="sidebar-card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-user-plus"></i> 推荐关注</h3>
                <a href="#" class="see-all">更多</a>
            </div>
            
            <div class="suggested-users">
                <div class="suggested-user">
                    <div class="user-info">
                        <img src="https://picsum.photos/id/64/48/48" alt="张晓明的头像" class="user-avatar">
                        <div class="user-details">
                            <p class="user-name">张晓明</p>
                            <p class="user-meta">产品经理 · 3个共同好友</p>
                        </div>
                    </div>
                    <button class="follow-btn">关注</button>
                </div>
                
                <div class="suggested-user">
                    <div class="user-info">
                        <img src="https://picsum.photos/id/65/48/48" alt="李婷婷的头像" class="user-avatar">
                        <div class="user-details">
                            <p class="user-name">李婷婷</p>
                            <p class="user-meta">UI设计师 · 关注了5个你关注的人</p>
                        </div>
                    </div>
                    <button class="follow-btn">关注</button>
                </div>
                
                <div class="suggested-user">
                    <div class="user-info">
                        <img src="https://picsum.photos/id/91/48/48" alt="王建国的头像" class="user-avatar">
                        <div class="user-details">
                            <p class="user-name">王建国</p>
                            <p class="user-meta">前端开发 · 经常浏览相同话题</p>
                        </div>
                    </div>
                    <button class="follow-btn">关注</button>
                </div>
            </div>
        </div>
        
        <!-- 推荐活动 -->
        <div class="sidebar-card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-calendar-alt"></i> 即将开始的活动</h3>
                <a href="#" class="see-all">全部</a>
            </div>
            
            <div class="event-list">
                <div class="event-item">
                    <span class="event-date">今天 19:30</span>
                    <p class="event-title">前端开发者线上交流会</p>
                    <p class="event-details">
                        <i class="fas fa-user"></i> 李明主持 · 
                        <i class="fas fa-users"></i> 248人已报名
                    </p>
                    <button class="join-btn">参加活动</button>
                </div>
                
                <div class="event-item">
                    <span class="event-date">明天 14:00</span>
                    <p class="event-title">产品设计思维工作坊</p>
                    <p class="event-details">
                        <i class="fas fa-user"></i> 张晓明主持 · 
                        <i class="fas fa-users"></i> 156人已报名
                    </p>
                    <button class="join-btn">参加活动</button>
                </div>
                
                <div class="event-item">
                    <span class="event-date">周六 10:00</span>
                    <p class="event-title">2023年Web技术趋势分享会</p>
                    <p class="event-details">
                        <i class="fas fa-user"></i> 技术社区联合主办 · 
                        <i class="fas fa-users"></i> 512人已报名
                    </p>
                    <button class="join-btn">参加活动</button>
                </div>
            </div>
        </div>
        
        <!-- 推荐群组 -->
        <div class="sidebar-card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-users"></i> 推荐群组</h3>
                <a href="#" class="see-all">更多</a>
            </div>
            
            <div class="groups">
                <div class="group-item">
                    <img src="https://picsum.photos/id/20/48/48" alt="前端开发者联盟" class="group-icon">
                    <div class="group-details">
                        <p class="group-name">前端开发者联盟</p>
                        <p class="group-meta">12.5k 成员 · 今日新帖 32</p>
                    </div>
                </div>
                
                <div class="group-item">
                    <img src="https://picsum.photos/id/21/48/48" alt="UI/UX设计交流群" class="group-icon">
                    <div class="group-details">
                        <p class="group-name">UI/UX设计交流群</p>
                        <p class="group-meta">8.7k 成员 · 今日新帖 18</p>
                    </div>
                </div>
                
                <div class="group-item">
                    <img src="https://picsum.photos/id/22/48/48" alt="全栈技术分享圈" class="group-icon">
                    <div class="group-details">
                        <p class="group-name">全栈技术分享圈</p>
                        <p class="group-meta">9.3k 成员 · 今日新帖 25</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 赞助商 -->
        <div class="sidebar-card sponsor-card">
            <div class="sponsor-badge">广告</div>
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-bullhorn"></i> 推荐服务</h3>
            </div>
            
            <div class="sponsor-content">
                <div class="sponsor-logo">
                    <img src="https://picsum.photos/id/1/40/40" alt="云开发平台Logo" />
                </div>
                <h4 class="sponsor-title">云开发平台</h4>
                <p class="sponsor-desc">一站式前端开发与部署解决方案，让开发更高效</p>
                <a href="#" class="sponsor-cta">了解详情</a>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 关注按钮交互
            const followButtons = document.querySelectorAll('.follow-btn');
            followButtons.forEach(button => {
                button.addEventListener('click', function() {
                    if (this.classList.contains('following')) {
                        this.classList.remove('following');
                        this.textContent = '关注';
                        showNotification('已取消关注');
                    } else {
                        this.classList.add('following');
                        this.textContent = '已关注';
                        showNotification('关注成功');
                    }
                });
            });
            
            // 活动参加按钮交互
            const joinButtons = document.querySelectorAll('.join-btn');
            joinButtons.forEach(button => {
                button.addEventListener('click', function() {
                    if (this.textContent === '参加活动') {
                        this.textContent = '已报名';
                        this.style.backgroundColor = '#10B981';
                        
                        // 更新参与人数
                        const eventDetails = this.previousElementSibling;
                        const currentCount = parseInt(eventDetails.textContent.match(/\d+/)[0]);
                        eventDetails.innerHTML = eventDetails.innerHTML.replace(
                            /\d+/, 
                            currentCount + 1
                        );
                        
                        showNotification('已成功报名活动');
                    } else {
                        this.textContent = '参加活动';
                        this.style.backgroundColor = '';
                        
                        // 更新参与人数
                        const eventDetails = this.previousElementSibling;
                        const currentCount = parseInt(eventDetails.textContent.match(/\d+/)[0]);
                        eventDetails.innerHTML = eventDetails.innerHTML.replace(
                            /\d+/, 
                            currentCount - 1
                        );
                        
                        showNotification('已取消活动报名');
                    }
                });
            });
            
            // 点击话题、标签、文章等项目的交互
            const interactiveItems = document.querySelectorAll(
                '.topic-item, .tag-item, .article-item, .image-content-item, .forum-post, .notification-item, .group-item'
            );
            
            interactiveItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 在实际应用中，这里会跳转到相应的详情页
                    let itemName = '';
                    
                    if (this.querySelector('.topic-item')) {
                        itemName = this.textContent.trim();
                    } else if (this.querySelector('.article-title')) {
                        itemName = this.querySelector('.article-title').textContent;
                    } else if (this.querySelector('.content-caption')) {
                        itemName = this.querySelector('.content-caption').textContent;
                    } else if (this.querySelector('.post-title')) {
                        itemName = this.querySelector('.post-title').textContent;
                    } else if (this.querySelector('.tag-item')) {
                        itemName = this.textContent.trim();
                    } else if (this.querySelector('.notification-text')) {
                        itemName = this.querySelector('.notification-text').textContent;
                    } else if (this.querySelector('.group-name')) {
                        itemName = this.querySelector('.group-name').textContent;
                    }
                    
                    console.log(`查看: ${itemName}`);
                    // 对于通知项，点击后标记为已读
                    if (this.classList.contains('notification-item')) {
                        const icon = this.querySelector('.notification-icon');
                        icon.classList.remove('unread');
                    }
                });
            });
            
        
        });
    </script>
</body>
</html>
    
